<template>
  <div>
    <!-- <h1>用户查询订单页面</h1> -->
    <div>
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"

          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="display:flex;justify-content:center">
        <el-menu-item><img src="../img/logo.png" @click="gotoindex()"></el-menu-item>
        <el-menu-item @click="gotoindex()">首页</el-menu-item>
        <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2"></i>购物车</el-menu-item>
        <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
        <el-menu-item index="6" @click="order">我的订单</el-menu-item>
        <el-menu-item index="7" @click="address">收货地址</el-menu-item>
        <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
        <el-menu-item index="9" @click="myShop">我的</el-menu-item>
      </el-menu>
    </div>
    <el-tabs class="orders">
      <div style="display: flex;justify-content: space-around">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal"
                 active-text-color="#ff5001">
          <el-menu-item index="1" @click="getOrders(0)">
            <span slot="title">全部订单</span>
          </el-menu-item>
          <el-menu-item index="2" @click="getOrders(1)">
            <span slot="title">未付款</span>
          </el-menu-item>
          <el-menu-item index="3" @click="getOrders(8)">
            <span slot="title">支付失败</span>
          </el-menu-item>
          <el-menu-item index="4" @click="getOrders(3)">
            <span slot="title">已完成</span>
          </el-menu-item>
          <el-menu-item index="5" @click="getOrders(4)">
            <span slot="title">退货中</span>
          </el-menu-item>
          <el-menu-item index="6" @click="getOrders(5)">
            <span slot="title">已退货</span>
          </el-menu-item>
          <el-menu-item index="7" @click="getOrders(7)">
            <span slot="title">拒绝退货</span>
          </el-menu-item>
        </el-menu>
        <el-date-picker
            style="margin-top: 20px"
            v-model="dateInfo"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            >
        </el-date-picker>
      </div>
      <div>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                  :data="props.row.orderDetailBeanList"
                  style="width: 100%">
                <el-table-column
                    prop=""
                    label=""
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="productId"
                    label="商品id"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="orderDMoney"
                    label="金额"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="orderDAmount"
                    label="数量">
                </el-table-column>
              </el-table>
              <el-form label-position="left" inline class="demo-table-expand" >
                <el-form-item label="" >
                  <span>{{}}</span>
                </el-form-item>
                <el-form-item label="收货人" >
                  <span>{{ props.row.address.addPerson }}</span>
                </el-form-item>
                <el-form-item label="收货电话">
                  <span>{{ props.row.address.addPhone }}</span>
                </el-form-item>
                <el-form-item label="收货地址">
                  <span>{{ props.row.address.addProvince+props.row.address.addCity+props.row.address.addDistrict+props.row.address.addDetail }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
              label="订单 ID"
              prop="orderId">
          </el-table-column>
          <el-table-column
              label="订单金额"
              prop="orderTotal">
          </el-table-column>
          <el-table-column
              label="支付方式"
              prop="orderPayment">
          </el-table-column>
          <el-table-column
              label="订单状态"
              prop="orderStatus">
          </el-table-column>
          <el-table-column
              label="下单时间"
              sortable
              prop="orderTime">
          </el-table-column>
          <el-table-column
              label="订单操作"
              align="right">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  v-if="scope.row.orderStatus=='已完成'"
                  @click="handleEdit(scope.$index, scope.row)">退货</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-tabs>


  </div>
</template>

<script>
export default {
  data() {
    return {
      //导航的控制栏
      activeIndex2: "1",
      orderStatus: "",
      userId: "",
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateInfo: [],


    }
  },
  mounted() {
    //is user
    let jsonUser = sessionStorage.getItem("user")
    console.log(jsonUser)
    if (jsonUser == '' || null == jsonUser) {
      this.$message.warning("请先登录")
      this.$router.push("/")
    } else {
      //json String to  json object
      let jsonObj = JSON.parse(jsonUser)
      this.userId = jsonObj.userId
      this.getOrders(0)
    }
  },
  methods: {
    gotoorder() {
      this.$router.push('/addUserOrder')
    },
    gotoindex() {
      this.$router.push('/ShopIndex')
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    order() {
      this.$router.push('/UserOrder')
    },
    address() {
      this.$router.push('getGoodsAddress')
    },
    pay() {
      this.$router.push('/deposit')
    },
    car() {
      this.$router.push('/ShopCar')
    },
    dposistdetil() {
      this.$router.push('/depositDetail')
    },
    gotoGoodsDetail() {

      this.$router.push('/ShopIndexDetail')
    },
    addShopCar() {
      this.$router.push('/ShopCar')
    },
    myShop() {
      this.$router.push('/user')
    },
    getOrders(status) {
      console.log(this.dateInfo)
      console.log(this.dateInfo[0])
      console.log(this.dateInfo[1])
      if(this.dateInfo.length==0){
        this.$axios.get("/api/order/showOrder/" +this.userId+"/"+null+"/"+null+"/"+status).then(r=>{
          console.log(r.data)
          for(let o of r.data){
            o.orderTotal=o.orderTotal/100
            if(o.orderPayment==1){
              o.orderPayment="支付宝"
            }else {
              o.orderPayment="预存款"
            }
            if(o.orderStatus==1){
              o.orderStatus="未付款"
            }else if(o.orderStatus==2){
              o.orderStatus="已付款"
            }else if(o.orderStatus==3){
              o.orderStatus="已完成"
            }else if(o.orderStatus==4){
              o.orderStatus="退货中"
            }else if(o.orderStatus==5){
              o.orderStatus="已退货"
            }else if(o.orderStatus==7){
              o.orderStatus="拒绝退货"
            }else if(o.orderStatus==8){
              o.orderStatus="支付失败"
            }
            for(let d of o.orderDetailBeanList){
              d.orderDMoney=d.orderDMoney/100
            }
            this.$axios.get("/api/userAddress/findById/" +o.addressId).then(r=>{
            o.address=r.data
            })
          }

          this.tableData=r.data
        })
      }else {
        this.$axios.get("/api/order/showOrder/" +this.userId+"/"+this.dateInfo[0]+"/"+this.dateInfo[1]+"/"+status).then(r=>{
          console.log(r.data)
          for(let o of r.data){
            o.orderTotal=o.orderTotal/100
            if(o.orderPayment==1){
              o.orderPayment="支付宝"
            }else {
              o.orderPayment="预存款"
            }
            if(o.orderStatus==1){
              o.orderStatus="未付款"
            }else if(o.orderStatus==2){
              o.orderStatus="已付款"
            }else if(o.orderStatus==3){
              o.orderStatus="已完成"
            }else if(o.orderStatus==4){
              o.orderStatus="退货中"
            }else if(o.orderStatus==5){
              o.orderStatus="已退货"
            }else if(o.orderStatus==7){
              o.orderStatus="拒绝退货"
            }else if(o.orderStatus==8){
              o.orderStatus="支付失败"
            }
          }
          this.tableData=r.data
        })
      }
    },
    handleEdit(index, row) {
      this.$axios.put("/api/order/returnOrder/" +row.orderId)
      location.reload();
      this.open1()
    },
    handleDelete(index, row) {
      this.$axios.put("/api/order/delOrder/" +row.orderId)
      location.reload();
    },
    open1() {
      this.$message({
        showClose: true,
        message: '此订单退货中，请耐心等候'
      });
    },
  }
}
</script>
<style>
.noItems {
  /* background: url() center no-repeat; */
  background-size: contain;
  min-height: 400px;
}

.orders {
  background-color: #ffffff;
  min-height: 500px;
  padding: 20px;
}

.orderHead {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #666666;
}

.orderHead th {
  width: 150px;
  background: #f5f5f5;
  height: 32px;
  line-height: 32px;
}

.orderHead th:nth-child(1) {
  /*width: 570px;*/
  width: 700px;
}

.orderBody .separate {
  height: 20px;
}

.orderBody .tr_th {
  background: #f5f5f5;
  height: 30px;
  line-height: 30px;
  color: #AAAAAA;
  font-size: 12px;
}

/*设置边框*/
.orderBody td {
  border: 1px solid #e5e5e5;
}

.orderBody .tr_th .dealTime {
  padding: 0 30px 0 20px;
}

.orderBody .orderId {
  color: #333333;
}

.order td {
  padding: 14px 0;
  font-size: 12px;
}

.order .goodItem div {
  float: left;
}

.order img {
  margin: 0 20px;
  width: 60px;
  height: 60px;
}

.order .orderName {
  width: 240px;
  height: 36px;
  line-height: 18px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-right: 200px;
}

.order .orderName a {
  text-decoration: none;
  color: #333;
  transition: .3s;
}

.order .orderName a:hover {
  color: #ff5501;
  text-decoration: underline;
}

.order .orderNum {
  color: #AAAAAA;
}

/*设置金额状态操作文字居中，水平位置，颜色*/
.order td:not(.orderMessage) {
  vertical-align: top;
  text-align: center;

}

.amount {
  color: #aaa;
}

.ftx-13 {
  display: block;
  width: 100px;
  margin: 5px auto;
  padding-top: 1px;
  border-top: solid 1px #E5E5E5;
  line-height: 19px;
  height: 19px;
  overflow: hidden;
}

/*设置操作一栏样式*/
.order td.orderOperate {
  line-height: 20px;
}

.orderOperate span {
  cursor: pointer;
  transition: .3s;
}

.orderOperate span:hover {
  color: #ff5501;
}

.block {
  text-align: center;
  padding: 30px 0;
}
</style>